<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:text="${hello}">hello</title>
</head>
<body>
<h1 th:text="${hello}"></h1>
<div>
<label for="src">流媒体视频源（rtsp/rtmp/hls/http-flv地址）：</label>
<input type="url" autofocus="autofocus" value="" name="src" id="src">
<label for="fmt">图片格式：</label>
<select id="fmt" name="fmt">
<option value="png">png</option>
<option value="jpg" selected="selected">jpg</option>
<option value="jpeg">jpeg</option>
<option value="gif">gif</option>
<option value="bmp">bmp</option>
</select>
<button id="btn" type="button" name="截图" title="截图" onclick="submit();">截图</button>
</div>
<div>
<p>显示截图<a id="download" target="_blank"></a></p>
<img id="img" alt="截图" style="margin:0;padding:0;width:500;height:500;">
</div>
</body>
<script type="text/javascript">
function isEmpty(s){
	return s==undefined||s==null||s.length<1||s=='';
}
function getDom(id){
	return document.getElementById(id);
}
function req(reqmethod,url,ret){
	var xmlhttp;
	if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	}else{// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function(){
		 if (xmlhttp.readyState==4 && xmlhttp.status==200){
			 if(typeof ret === "function"){
				ret(xmlhttp.responseText);
			}
		}
	};
	xmlhttp.open(reqmethod,url,true);
	xmlhttp.send();
}
function submit(){
	getDom("btn").disabled=true;
	var fmt=getDom("fmt").value;
	var src=getDom("src").value;
	if(isEmpty(src)){
		alert("请填写一个视频源");
	}
	req("GET","shot?src="+src+"&fmt="+fmt,function(res){
		getDom("btn").disabled=false;
		if(!isEmpty(res)){
			var data=eval('('+res+')');
			if(isEmpty(res)){
				alert(data.msg);
				return;
			}
			viewImg(data.base64);
		}else{
			alert("请求失败");
		}
	});
}
function viewImg(data){
	var fmt=getDom("fmt").value;
	var s='data:image/'+fmt+';base64,'+data;
	getDom("img").src=s;
	
	var d=getDom("download");
	d.href=s;
	d.text="（点击这里下载本截图）";
	d.download="截图."+fmt;
}
</script>
</html>